<template>
  <view class="datetime-selector" v-if="show">
    <view class="mask" @tap="cancel"></view>
    <view class="content">
      <!-- 顶部标题 -->
      <view class="header">
        <text class="cancel" @tap="cancel">取消</text>
        <text class="title">选择时间</text>
        <text class="confirm" @tap="confirm">确定</text>
      </view>

      <!-- 多列选择器 -->
      <picker-view 
        class="picker-view" 
        :value="selectedIndexes" 
        @change="onPickerChange"
      >
        <!-- 日期列 -->
        <picker-view-column>
          <view class="picker-item" v-for="(date, index) in dateList" :key="index">
            {{ date.label }}
          </view>
        </picker-view-column>
        <!-- 时间列 -->
        <picker-view-column>
          <view class="picker-item" v-for="(time, index) in timeList" :key="index">
            {{ time }}
          </view>
        </picker-view-column>
      </picker-view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'DateTimeSelector',
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      selectedIndexes: [0, 0],
      dateList: [],
      timeList: []
    }
  },
  watch: {
    show(newVal) {
      if (newVal) {
        this.initDateList()
        this.initTimeList()
      }
    }
  },
  methods: {
    // 初始化日期列表
    initDateList() {
      const today = new Date()
      const dates = []
      
      // 添加今天
      dates.push({
        label: '今天',
        value: today.toISOString().split('T')[0]
      })

      // 添加未来14天的日期
      for (let i = 1; i <= 14; i++) {
        const date = new Date(today)
        date.setDate(today.getDate() + i)
        const month = date.getMonth() + 1
        const day = date.getDate()
        const label = i === 1 ? `${month}月${day}日 明天` : `${month}月${day}日`
        
        dates.push({
          label,
          value: date.toISOString().split('T')[0]
        })
      }

      this.dateList = dates
    },
    // 初始化时间列表
    initTimeList() {
      const times = []
      for (let hour = 0; hour < 24; hour++) {
        for (let minute = 0; minute < 60; minute += 15) {
          const formattedHour = hour.toString().padStart(2, '0')
          const formattedMinute = minute.toString().padStart(2, '0')
          times.push(`${formattedHour}:${formattedMinute}`)
        }
      }
      this.timeList = times
    },
    // 处理选择器变化
    onPickerChange(e) {
      this.selectedIndexes = e.detail.value
    },
    cancel() {
      this.selectedIndexes = [0, 0]
      this.$emit('update:show', false)
    },
    confirm() {
      const selectedDate = this.dateList[this.selectedIndexes[0]]
      const selectedTime = this.timeList[this.selectedIndexes[1]]
      
      const result = {
        label: selectedDate.label,
        time: selectedTime
      }
      this.$emit('select', result)
      this.$emit('update:show', false)
    }
  }
}
</script>

<style lang="scss" scoped>
.datetime-selector {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;

  .mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
  }

  .content {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 20rpx 20rpx 0 0;

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx;
      border-bottom: 1px solid #eee;

      .cancel {
        color: #666;
      }

      .title {
        font-weight: bold;
      }

      .confirm {
        color: #ff6b6b;
      }
    }

    .picker-view {
      width: 100%;
      height: 400rpx;
      
      .picker-item {
        line-height: 88rpx;
        text-align: center;
        font-size: 28rpx;
      }
    }
  }
}
</style> 